<template>
	<div>
		
		<van-button type="text" @click='engZh' class="posRig">
			<div>{{eng}}</div>
		</van-button>
		<h2 class="title ">
			<div class=" flex-box inline-flex" >
				{{$H(this,'title').split('-')[0]}}</br>
				{{$H(this,'title').split('-')[1]}}</br>
				{{$H(this,'title').split('-')[2]}}
			</div>
		
		</h2>
		<van-form @submit="handleLogin" validate-first @failed="onFailed" style="padding:0 20px">
			
			<van-field clearable v-model="username" @input='inpuUser' name="用户名" :label-align="'right'" label left-icon="manager"
			 placeholder="Username" 
			 :rules="[{ equired: true, message: $t('app.Login.userNameMsg'),target:'blur'}]" />
			<van-field clearable ref="password" @input='inpuUser' v-model="password" :type="passwordType" name="密码" :label-align="'right'"
			 left-icon="lock" :right-icon="passwordType === 'password' ? 'closed-eye' : 'eye-o'" @click-right-icon="showPwd"
			 placeholder="Password" :rules="[
				 { required: true,target:['blur'],pattern:/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[^]{8,100}$/, message: $H(this,'passwordMsg') }]" />
			 <!-- /^([a-zA-Z-0-9]){8,30}$/ -->
			<van-checkbox class="savePassUser" v-model="saveUserPasswords">{{$H(this,'saveLabel')}}</van-checkbox>
			<div style="padding: 16px 0;">
				<van-button block type="info" style="border-radius: 5px;" native-type="submit">{{$H(this,'button')}}</van-button>
			</div>
			<div class="t-center" :style="{ fontSize: 12 + 'px',color:'#fff' }">
				<router-link tag='van-button' class="whiteClor  van-button--text" type='text' :to='{name:"ForgetPassword"}'>
					{{$H(this,'forget')}}？
				</router-link>
			</div>
		
			<div v-if="env === 'development'" class='testAdmin' @click="switcha('1174099414@qq.com')">切换super admin账号</div>
			<div v-if="env === 'development'" class='testAdmin' @click="switcha('admin@demo.com')">切换admin账号</div>
			      <div v-if="env === 'development'" class='testAdmin' @click="switcha('medical@demo.com')">切换medical账号</div>
			<!-- <div v-if="env === 'development'" class='testAdmin' @click="switcha('linDoctors@demo.com')">切换醫生账号</div>
			<div v-if="env === 'development'" class='testAdmin' @click="switcha('coach@demo.com', '123456Aa')">切换护士账号</div> -->
			<div v-if="env === 'development'" class='testAdmin' @click="switcha('head_coach@demo.com',)">切换主教練（head_coach）账号</div>
			<div v-if="env === 'development'" class='testAdmin' @click="switcha('coachs@demo.com', '123456Aa')">切换教練（coach）账号</div>
			<div v-if="env === 'development'" class='testAdmin' @click="switcha('athlete@demo.com')">切换运动员账号(athlete)</div>
		</van-form>
		
			<div class="posLft" >Version:{{version}}</div>
	</div>
</template>
<script>
	import jsEncrypt from "./jsEncrypt";
	export default {
		name: "Login",
		data() {
			return {
				eng: this.$store.getters.lang.langStr,
				username: process.env.NODE_ENV === 'development' ? this.$store.state.user.username?this.$store.state.user.username :'beta_lam@smartone.com' : '',
				// andy.tai@teamotto.net
				// linAdmin@teamotto.net
				password: this.$store.state.user.password?this.$store.state.user.password :process.env.NODE_ENV === 'development' ? '123456Aa' : '', // 123456
				passwordType: "password",
				saveUserPasswords: this.$store.state.user.saveUserPasswords ? this.$store.state.user.saveUserPasswords : '',
				env: process.env.NODE_ENV
			};
		},
		computed: {

		},
		created() {

			//this.eng = localStorage.getItem('lang')||'Eng'
			//this.engZh(null,this.eng)
		},
		mounted() {
			console.log("va", this);
			jsEncrypt()
			console.log(jsEncrypt)
			
			if (this.$store.state.user.username && this.$store.state.user.password) {
				this.username = this.$store.state.user.username
				this.password = this.$store.state.user.password
				this.saveUserPasswords = this.$store.state.user.password
			}
		},
		watch: {
			saveUserPasswords(check) {
				this.$store.dispatch('user/saveUserPasswords', {
					check,
					password: this.password,
					username: this.username
				})
			},
			['$parent'](p) {
				console.log('d', p)
			}
		},
		$route: {
			handler: function(route) {
				this.redirect = route.query && route.query.redirect;
			},
			immediate: true
		},
		methods: {
			inpuUser() {
				this.saveUserPasswords = false
			},
			switcha(username, password) {
				this.username = username || 'beta_lam@smartone.com', // andy.tai@teamotto.net//beta_lam@smartone.com
					this.password = password || "123456Aa" // 123456
				setTimeout(function() {
					// that.handleLogin()
				}, 1000);
			},
			validator(val) {
				return /1\d{20}/.test(val);
			},
			// 异步校验函数返回 Promise
			asyncValidator(val) {
				return new Promise(resolve => {
					this.$toast.loading("验证中...");

					setTimeout(() => {
						this.$toast.clear();
						resolve(/\d{6}/.test(val));
					}, 1000);
				});
			},
			onFailed(errorInfo) {
				console.log("failed", errorInfo);
			},
			engZh(e, lang) {
				//this.engState=!this.engState
				//debugger
				if (!lang) {
					this.eng = this.eng === 'Eng' ? '中文繁體' : 'Eng'
					this.$store.dispatch('user/langChange', this.eng)
				}
			},
			showPwd() {
				if (this.passwordType === "password") {
					this.passwordType = "";
				} else {
					this.passwordType = "password";
				}
				this.$nextTick(() => {
					this.$refs.password.focus();
				});
			},
			handleLogin(values) {
				console.log("submit", values);
				this.loading = true;
				var password = jsEncrypt(this.password);
				this.$store.dispatch("user/login", {
						username: this.username,
						password
					})
					.then(() => {
						this.$router.replace({
							path: this.redirect || "/"
						});
						this.loading = false;
					})
					.catch(() => {
						this.loading = false;
					});
			}
		}
	};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
.inline-flex{
	text-align: center;
	display: -webkit-inline-flex;
	    display: -moz-inline-flex;
	    display: -ms-inline-flex;
	    display: inline-flex;
}
</style>
